<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>能耗监测</title>
<link rel="stylesheet"
	href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	
</script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jsp/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/Calender.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$('#select1').blur(function() {
			var select1 = document.getElementById('select1').value;
			getSelect1(select1)
		})

		$('#sect1').blur(function() {
			var sect1 = document.getElementById('sect1').value;
			getSect1(sect1)
		})
	})

	function getSelect1(select1) {
		$
				.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/consums/getSelect1.action',
					data : 'select1=' + select1,
					success : function(data) {
						init()
					}
				})
	}
	function getSect1(sect1) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/consums/getSect1.action',
			data : 'sect1=' + sect1,
			success : function(data) {
				searchName(1)
			}
		})
	}

	function searchName(num) {

		$
				.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/consums/searchName.action',
					success : function(data) {
						init()
					}
				})
	}

	function setList() {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/consums/setList.action',
			success : function(data) {
				init()
			}
		});
	}

	function init() {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/consums/getList.action',
			dataType : 'html',
			success : function(data) {
				$("#mainConType").html(data);
			}
		});
	}

	function deleteThis(id) {
		$
				.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/consums/deleteThis.action',
					data : 'id=' + id,
					success : function(data) {
						init()
					}
				});
	}

	function insertThis() {
		$
				.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/consums/insertThis.action',
					success : function(data) {
						$("#consum").html(data);
					}
				});
	}

	function updateThis(id) {
		$
				.ajax({
					type : 'post',
					url : '${pageContext.request.contextPath}/consums/updateThis.action',
					data : 'id=' + id,
					success : function(data) {
						$("#consum").html(data);
					}
				});
	}
</script>
<base href="${pageContext.request.contextPath}/">
</head>
<body>
	<div id="mainConType">


		<div id="mainType" style="width: 1200px; margin-left: 50px;">


			<div id="headerType"
				style="width: 1200px; height: 30px; margin-top: 30px; margin-left: 1px;">






				<button onclick="setList()" class="btn btn-success"
					style="height: 35px; float: left; width: 120px;">显示全部数据</button>

				<select name="option1" id="sect1" class="form-control"
					style="height: 30px; float: left; width: 150px;">
					<c:forEach items="${optionList}" var="consums">
						<option value="${consums.various}">${consums.various}</option>
					</c:forEach>
				</select>

			</div>


			<!-- <a href="javascript:void(0);" onclick="insertThis()">增加能源种类</a> -->
			<div id="tableShow"
				style="width: 1200px; background-color: white; margin-top: 30px; padding-top: 12px; padding-bottom: 10px;">
				<table id="consum" class="table table-hover"
					style="width: 1100px; margin-left: 50px;">
					<thead>
						<tr>
							<td>ID</td>
							<td>能源种类</td>
							<td>能源消耗总量</td>
							<td>本月预期消耗</td>
							<td>本月实际消耗</td>
							<!-- <td>操作</td> -->
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${consumList}" var="consums" begin="0" end="50">
							<tr>
								<td>${consums.id}</td>
								<td>${consums.various}</td>
								<td>${consums.total}</td>
								<td>${consums.expect}</td>
								<td>${consums.actual}</td>
								<%-- <td><a href="javascript:void(0);" onclick="updateThis(${consums.id})">修改</a>
					<button onclick="deleteThis(${consums.id})">删除</button></td>
 --%>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>

			<br> <select id="select1" name="select1" class="form-control"
				style="width: 180px;">
				<option value="jsp/a.jsp">3D环形图</option>
				<option value="jsp/a2.jsp">动态柱状图</option>
			</select>
			<hr>


			<iframe src="${jsppage}" id="myiframe" scrolling="no" frameborder="0"
				style="width: 1100px; height: 2000px;">这是A</iframe>

		</div>
	</div>

</body>
</html>